<script setup lang="tsx">
import { Form } from '@/components/Form'
import { reactive, ref, onMounted, computed } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ContentWrap } from '@/components/ContentWrap'
import { useAppStore } from '@/store/modules/app'
import { FormSchema } from '@/components/Form'

import { BaseButton } from '@/components/Button'

const appStore = useAppStore()
const formRef = ref()
const formModel = ref({})
const { t } = useI18n()

const isMobile = computed(() => appStore.getMobile)


onMounted(() => {
  let test = {
    field2: true,
    field3: true,
    field4: true,
    field5: true,
    field6: true,
    field7: true
  }
  formRef.value.setValues(test)
  console.log(formRef.value, '123123')
})

const schema = reactive<FormSchema[]>([
  {
    field: 'field1',
    label: t('formDemo.baseParams'),
    component: 'Divider'
  },
  {
    field: 'field2',
    component: 'IAgree',
    componentProps: {
      text: '允许超申请数量采购'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field2',
    component: 'IAgree',
    componentProps: {
      text: '采购退料时自动创建补货订单'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field3',
    label: '订单状态',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ]
    },
    colProps: { span: 8 }
  },
  {
    field: 'field4',
    component: 'IAgree',
    componentProps: {
      text: '业务组数据隔离'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field5',
    component: 'IAgree',
    componentProps: {
      text: '调价表审核时自动生效'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field6',
    component: 'IAgree',
    componentProps: {
      text: '允许不合格品入库'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field7',
    component: 'IAgree',
    componentProps: {
      text: '已关闭订单可以变更'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field8',
    component: 'IAgree',
    componentProps: {
      text: '已关闭采购合同可以变更'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field9',
    component: 'IAgree',
    componentProps: {
      text: '配额管理物料只能配额生成订单'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field10',
    component: 'IAgree',
    componentProps: {
      text: '收料检验后不合格品自动退料'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field11',
    label: '退料单状态',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ]
    },
    colProps: { span: 8 }
  },
  {
    field: 'field12',
    component: 'IAgree',
    componentProps: {
      text: '收料检验后合格品自动入库'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field13',
    label: '入库单状态',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '创建',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ]
    },
    colProps: { span: 8 }
  },
  {
    field: 'field14',
    component: 'IAgree',
    componentProps: {
      text: '自动入库/退料不验证单据新增权限'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field15',
    component: 'IAgree',
    componentProps: {
      text: '入库单取即时汇率'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field16',
    component: 'IAgree',
    componentProps: {
      text: '收料单取即时汇率'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field17',
    component: 'IAgree',
    componentProps: {
      text: '退料单取即时汇率'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field18',
    component: 'IAgree',
    componentProps: {
      text: '订单新变更单/变更单审核不自动生效'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field19',
    component: 'IAgree',
    componentProps: {
      text: '合同变更单审核不自动生效'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field20',
    component: 'IAgree',
    componentProps: {
      text: '配额下单可选无价目表和货源清单的采购申请'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field21',
    component: 'IAgree',
    componentProps: {
      text: '货源清单支持辅助属性'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field22',
    component: 'IAgree',
    componentProps: {
      text: '启用最小包装量，最小最大订货量'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field23',
    component: 'IAgree',
    componentProps: {
      text: '启用最小包装量，最小最大订货量'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field24',
    component: 'IAgree',
    componentProps: {
      text: '允许入库数量大于质检数量'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field25',
    component: 'IAgree',
    componentProps: {
      text: '不允许跨期已结案委外订单退料'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field26',
    label: t('formDemo.selectionOfOrderChangeMethod'),
    component: 'Divider'
  },
  {
    field: 'field27',
    component: 'IAgree',
    componentProps: {
      text: '启用订单变更单'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field28',
    component: 'IAgree',
    componentProps: {
      text: '直接订单变更（不支持审批流）'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field29',
    component: 'IAgree',
    componentProps: {
      text: '启用订单新变更单（支持自定义字段变更和审批流）'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field30',
    label: '特批用户',
    component: 'Input',
    colProps: { span: 8 }
  },
  {
    field: 'field31',
    label: '特批密码',
    component: 'Input',
    componentProps: {
      showPassword: true
    },
    colProps: { span: 8 }
  },
  {
    field: 'field32',
    label: '确认密码',
    component: 'Input',
    componentProps: {
      showPassword: true
    },
    colProps: { span: 8 }
  },
  {
    field: 'field33',
    label: '保质期检查强度',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '预警提示',
          value: '1'
        },
        {
          label: 'option2',
          value: '2'
        }
      ]
    },
    colProps: { span: 8 }
  },
  {
    field: 'field34',
    component: 'IAgree',
    componentProps: {
      text: '启用变更查询'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field35',
    component: 'IAgree',
    componentProps: {
      text: '启用套件采购'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field36',
    component: 'IAgree',
    componentProps: {
      text: '套件齐套检查'
    },
    colProps: { span: 8 }
  },
  {
    field: 'field37',
    component: 'IAgree',
    componentProps: {
      text: '申请单修改数量不更新提前期'
    },
    colProps: { span: 8 }
  },{
    field: 'field38',
    component: 'IAgree',
    componentProps: {
      text: '启用货源清单/价目表控制采购范围'
    },
    colProps: {  span: 24, // 改为24将占满整行
    style: { marginTop: '50px' } },
  }
])

const handleSubmit = async () => {
  const formData = formRef.value.formModel
  console.log('表单数据:', formData)
}
</script>

<template>
  <ContentWrap>
    <BaseButton type="primary" @click="handleSubmit">保存</BaseButton>
    <Form
      ref="formRef"
      :schema="schema"
      :model="formModel"
      label-width="auto"
      :label-position="isMobile ? 'top' : 'right'"
    />
  </ContentWrap>
</template>

<style lang="less">
.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;

  .text {
    position: absolute;
    left: 50%;
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    line-height: 24px;
    border-radius: 50%;
    transform: translateX(-50%);
  }

  &.current {
    .text {
      color: #fff;
      background: #626aef;
    }
  }

  .holiday {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--el-color-danger);
    border-radius: 50%;
    transform: translateX(-50%);
  }
}

.transfer-footer {
  padding: 6px 5px;
  margin-left: 15px;
}

.el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
